<!--
过渡
    transition
        - 过度动画：从一个状态渐渐过渡到另一个状态。
        - 兼容性问题：IE9以下不支持
        - 不会影响布局
        - 经常与:hover搭配
        - 谁想要过渡效果就给谁添加

    transition: 想要过渡的属性  耗时  运动曲线  延迟触发时间;
        参数1：指定想要变化的属性（宽高内外边距等），都变（all）
        参数2：耗时，单位s，必须写单位
        参数3：可以省略，默认ease（逐渐慢下来）
        参数4：可以省略，设置延时触发时间，必须写单位，默认0s
-->
<style>
  div {
    width: 300px;
    height: 300px;
    background-color: cyan;

    /* 参数省略 */
    /* transition: width 1s linear 2s; */
    /* transition: width 1s linear; */
    /* transition: width 1s 2s; */
    /* transition: width 1s; */

    /* 时间省略0 */
    /* transition: width 0.5s; */
    /* transition: width .5s; */

    /* 多个变化 */
    transition: width 0.5s, height 0.5s;

    /* 全部变化 */
    /* transition: all .5s; */
  }
  div:hover {
    width: 500px;
    height: 600px;
  }
</style>

<div></div>
